import dayjs from 'dayjs'
import { useEffect, useState } from 'react'
import './styles.scss'

interface Props {
  number: number
}

const preOldClassName = 'card-item two'
const preNewClassName = 'card-item two pre-spin'
const nextOldClassName = 'card-item three'
const nextNewClassName = 'card-item three next-spin'

const PageComponent: React.FC<Props> = ({ number }) => {
  const [[two, three], setClassNameList] = useState([preOldClassName, nextOldClassName])

  useEffect(() => {
    setClassNameList([preNewClassName, nextNewClassName])
    setTimeout(() => {
      setClassNameList([preOldClassName, nextOldClassName])
    }, 800);
  }, [number])

  return (
    <div className="card-container">
      <div className='card-item one' >{number}</div>
      <div className={two} >{number}</div>
      <div className={three} >{number}</div>
      <div className='card-item four' >{number}</div>
      <div className='tran-line'/>
    </div>
  )
}

export default PageComponent